<!DOCTYPE html>
<html lang="en">
<head>
	
	<title>MowHome Automation Center</title>
	
	<!-- Page styling - CSS -->
	<link href="../assets/style.css" rel="stylesheet" type="text/css"/>

	<!-- Color Picker source files for CSS and JavaScript -->
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/utilities/utilities.js"></script> 
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/slider/slider-min.js"></script> 
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/colorpicker/colorpicker-min.js"></script>


	<link rel="stylesheet" type="text/css" href="../assets/colorpicker.css"></script>

	<!-- Color Picker handling, also throttle color change requests. -->
    <script type="text/javascript" src="../assets/color_picker.js"></script>

	<!-- Websocket and AJAX functions, AirCon command functions (communication)-->
	<script type="text/javascript" src="../assets/communication.js" ></script>

	<!-- Cookies: Password hash cookie and panel status open/close toggle and cookies-->
	<script type="text/javascript" src="../assets/webtoolkit_md5.js" ></script>
	<script src="../assets/cookie_stuff.js" ></script>

	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
	



	<script type="text/javascript">
		$(document).ready(function() {
		
			var remembered_selectors = Array(
				"AC_temperature",
				"AC_fan_speed",
				"AC_timer",
				"AC_mode",
				"commandDestination",
				"Digital0",
				"Digital1",
				"Digital2"
				);
			
			var remembered_panels = Array(
				"air_con",
				"blinds",
				"mood_light",
				"custom_input",
				"feedback", 
				"samples", 
				"settings",
				"temp_frequency"
				);		
		
		
			checkWebSockets(true);
			checkPasswordCookie();
			checkButtonCookies(remembered_panels);
			checkSelectorCookies(remembered_selectors);	
		});
	</script>

</head>
	
<body>
	
	<input type="hidden" id="password"/>

	<center>
		<button id="air_con_button" type="button" onclick ="toggle('air_con')" class="panelSelector" >Air Con</button>
		<button id="blinds_button" type="button" onclick ="toggle('blinds')" class="panelSelector" >Blinds</button>
		<button id="mood_light_button" type="button" onclick ="toggle('mood_light')" class="panelSelector" >Mood Lighting</button>
		<button id="custom_input_button" type="button" onclick ="toggle('custom_input')" class="panelSelector" >Custom Input</button>
		<button id="samples_button" type="button" onclick ="toggle('samples')" class="panelSelector" >Samples</button>
		<button id="feedback_button" type="button" onclick ="toggle('feedback')" class="panelSelector" >Feedback</button>

		<img  src="http://www.sponsorbaglantimerkezi.com/theme/grb/icons/settings.png" onclick ="setPassword()" legth="10px" height="10px" >
	
		<div id="air_con_panel" class="panel">

		
			<p id="AC_status" class="sectionHeader">Air Conditioner</p>
			<div id="temperature_display_panel" class="panel">
				<table>
					<tr>
						<td>
							<div id="room_temp" class="sectionHeader"></div>
						</td>
						<td>
							<!--button id="temp_frequency_button" type="button" onclick ="toggle('temp_frequency')" class="panelSelector" style="font-size: xx-small">Frequency</button-->
						</td>
						<td>
							<div id="temp_frequency_panel" class="panel" style="position:absolute">
								<select  size="1"  onChange="sendCmd('2[t' +this.options[this.selectedIndex].value +']'); toggle('temp_frequency')">
									<option value="0">Stop</option>
									<option value="10">1 sec</option>
									<option value="100">10 sec</option>
									<option value="600">1 min</option>
									<option value="6000">10 min</option>
								</select>
							</div>
						</td>
					</tr>
				</table>
			</div>
			
			<br>
			
			<!--button type="button" onclick ="setACTimer()" value ="" class="toggleButton">TIMER</button-->		
			<img src="http://www.iconarchive.com/icons/mazenl77/I-like-buttons-3a/128/Cute-Ball-Time-icon.png" onclick ="setACTimer()"> 

	
			<!--button type="button" onclick ="ACTogglePower()" value ="" class="toggleButton">POWER</button-->
			<img src="http://icons.iconarchive.com/icons/mazenl77/I-like-buttons-3a/128/Cute-Ball-Standby-icon.png" onclick ="ACTogglePower()"> 

			<!--button id="settings_button" type="button" onclick ="toggle('settings')" class="panelSelector" style="font-size: xx-small">Settings</button-->
			<img src="http://www.sponsorbaglantimerkezi.com/theme/grb/icons/settings.png" onclick ="toggle('settings')" length="16px" height="16px">


			<div id="settings_panel" class="panel">
				<table>
					<tr>
						<td rowspan="4">
							<img src ="http://icons.iconarchive.com/icons/jackietran/rounded/32/Play-Blue-icon.png"  onclick ="ACChangeSettings()">
						</td>
						<td>FAN:</td>
						<td>
							<center><div>
								<select id="AC_fan_speed" size="1"  onChange="setCookie(this.id,this.value,365)">
									<option value="1">LOW</option>
									<option value="2">MED</option>
									<option value="3">HIGH</option>
									<option value="4">AUTO</option>
								</select>
							</center></div>
						</td>
					</tr>
					<tr>
						<td>TEMP:</td>
						<td>
							<center><div>
								<select id="AC_temperature" size="1" onChange="setCookie(this.id,this.value,365)">
									<option value="16">16</option>
									<option value="17">17</option>
									<option value="18">18</option>
									<option value="19">19</option>
									<option value="20">20</option>
									<option value="21">21</option>
									<option value="22">22</option>
									<option value="23">23</option>
									<option value="24">24</option>
									<option value="25">25</option>
									<option value="26">26</option>
									<option value="27">27</option>
									<option value="28">28</option>
									<option value="29">29</option>
									<option value="30">30</option>
								</select></div>
							</center>
						</td>
					</tr>
					<tr>
						<td>Timer (min):</td>
						<td>
							<center><div>
								<select id="AC_timer" size="1" onChange="setCookie(this.id,this.value,365)">
								  <option value="0" selected>Reset</option>
								  <option value="3">3</option>
								  <option value="4">4</option>
								  <option value="5">5</option>
								  <option value="7">7</option>
								  <option value="10">10</option>
								</select></div>
							</center>
						</td>
					</tr>
					<tr>
						<td>Mode:</td>
						<td>
							<center><div>
								<select id="AC_mode" size="1" onChange="setCookie(this.id,this.value,365)">
								  <option value="HOT" selected>Heating</option>
								  <option value="COLD">Cooling</option>
								</select></div>
							</center>
						</td>
					</tr>
				</table>	
			</div>
		</div>
		
		<div id="blinds_panel" class="panel">
			<p id='blinds_status' class="sectionHeader">Blinds</p>
			<table><tr><td>			
		  		<img src="http://icons.iconarchive.com/icons/saki/snowish/128/Arrow-double-up-icon.png" onclick ="sendCmd('1[U]')"> 
			</td><td>
				<img src="http://icons.iconarchive.com/icons/saki/nuoveXT-2/128/Actions-stop-icon.png" onclick ="sendCmd('1[S]')"> 
			</td><td>
		  		<img src="http://icons.iconarchive.com/icons/saki/snowish/128/Arrow-double-down-icon.png" onclick ="sendCmd('1[D]')"> 
			</td>
			</tr></table> 		
		</div>
		
		<div id="mood_light_panel" class="panel">
			<p id='mood_light_status' class="sectionHeader">Mood Lighting</p>
			<table><tr><td>			
		  		<img src="http://icons.iconarchive.com/icons/jackietran/rounded/32/Power-Button-Green-icon.png" onclick ="sendCmd('4[l1]')"> 
				<br>
		  		<img src="http://icons.iconarchive.com/icons/jackietran/rounded/32/Power-Button-Orange-icon.png" onclick ="sendCmd('4[l0]')"> 
				<br>
				<img src="http://icons.iconarchive.com/icons/jackietran/rounded/32/Loading-icon.png" onclick ="sendCmd('4[f]')"> 
			</td><td>
				<div class="yui-skin-sam">
					<div id="light_color_picker" class="light_color_picker"> 
					<!--Color Picker will appear here--> 
					</div>
				</div>
			</td></tr></table>  
		</div>
			
		<div id="custom_input_panel" class="panel">
		
			<p class="sectionHeader">Custom Input</p>
				Custom CMD:
				<input type="text" id="customInput"/>
				<button type="button" onclick ="sendCmd(document.getElementById('customInput').value)" >Send</button>
			
			<table>
	<tr>
		<td rowspan = "20">
			<select id="commandDestination" onChange="setCookie(this.id ,this.value,365)">
				<option value="">Broadcast</option>
				<option value="1">1</option>
				<option value="2">AC</option>
				<option value="3">3</option>
				<option value="4">Mood Light</option>
			</select>
		</td>		
		<td>Digital0:</td><td>
			<select  id="D0" name="D0" onChange="setCookie(this.id ,this.value,365)">
				<option value="00">Disabled</option>
				<option value="02">ADC</option>
				<option value="03">DI</option>
				<option value="04">OUT LOW</option>
				<option value="05">OUT HIGH</option>
			</select>
		</td><td><button id="D0" onclick ="sendATCommand(this.id)">Send</button></td>
	</tr>
	<tr>
		<td>Digital1:</td><td>
			<select  id="D1" name="D1" onChange="setCookie(this.id ,this.value,365)">
				<option value="00">Disabled</option>
				<option value="02">ADC</option>
				<option value="03">DI</option>
				<option value="04">OUT LOW</option>
				<option value="05">OUT HIGH</option>
			</select>
		</td><td><button id="D1" onclick ="sendATCommand(this.id)">Send</button></td>
	</tr>
	<!--********* Duplicate between here (typical) *****-->
	<!--********* just add id to *************-->
	<tr>
		<td>Digital2:</td><td>
			<select  id="D2" name="D2" size="1" onChange="setCookie(this.id ,this.value,365)">
				<option value="00">Disabled</option>
				<option value="02">ADC</option>
				<option value="03">DI</option>
				<option value="04">OUT LOW</option>
				<option value="05">OUT HIGH</option>
			</select>
		</td><td><button id="D2" onclick ="sendATCommand(this.id)">Send</button></td>
	</tr>
	<!--**************** and here *********************-->
	<tr>
		<td>Digital3:</td><td>
			<select  id="D3" name="D3" size="1" onChange="setCookie(this.id ,this.value,365)">
				<option value="00">Disabled</option>
				<option value="02">ADC</option>
				<option value="03">DI</option>
				<option value="04">OUT LOW</option>
				<option value="05">OUT HIGH</option>
			</select>
		</td><td><button id="D3" onclick ="sendATCommand(this.id)">Send</button></td>
	</tr>	
	<tr>
		<td>Sample Rate:</td><td>
				<input type="text" id="IR" name="IR"/>
		</td><td><button id="IR" onclick ="sendATCommand(this.id)">Send</button></td>
		<td>32-FFFF or 0</td>
	</tr>	
	<tr>
		<td>Sleep Mode:</td><td>
			<select  id="SM" name="SM" size="1" onChange="setCookie(this.id ,this.value,365)">
				<option value="00">No Sleep</option>
				<option value="01">Pin Hibernate</option>
				<option value="02">Pin Doze</option>
				<option value="04">Cycling Sleep</option>
				<option value="05">C.S w/ Pin W.U</option>
			</select>
		</td><td><button id="SM" onclick ="sendATCommand(this.id)">Send</button></td>
	</tr>
	<tr>
		<td>Power Level:</td><td>
			<select  id="PL" name="PL" size="1" onChange="setCookie(this.id ,this.value,365)">
				<option value="00">-10 dDm</option>
				<option value="01">-d bBm</option>
				<option value="02">-4 dBm</option>
				<option value="03">-2 dBm</option>
				<option value="04">0 dBm</option>
			</select>
		</td><td><button id="PL" onclick ="sendATCommand(this.id)">Send</button></td>
	</tr>	
	<tr>
		<td>PWM0:</td><td>
			<select  id="P0" name="P0" size="1" onChange="setCookie(this.id ,this.value,365)">
				<option value="00">Disabled</option>
				<option value="01">RSSI</option>
				<option value="02">PWM0</option>
			</select>
		</td><td><button id="P0" onclick ="sendATCommand(this.id)">Send</button></td>
	</tr>
	<tr>
		<td>PWM0 Value:</td><td>
				<input type="text" id="M0" name="M0"/>
		</td><td><button id="M0" onclick ="sendATCommand(this.id)">Send</button></td>
	</tr>
		<td>PWM1:</td><td>
			<select  id="P1" name="P1" size="1" onChange="setCookie(this.id ,this.value,365)">
				<option value="00">Disabled</option>
				<option value="01">RSSI</option>
				<option value="02">PWM1</option>
			</select>
		</td><td><button id="P1" onclick ="sendATCommand(this.id)">Send</button></td>
	</tr>	
	<td>PWM1 Value:</td><td>
				<input type="text" id="M1" name="M1"/>
		</td><td><button id="M1" onclick ="sendATCommand(this.id)">Send</button></td>
	</tr>
	
	<tr>
		<td>RO:</td><td>
				<input type="text" id="RO" name="RO"/>
		</td><td><button id="RO" onclick ="sendATCommand(this.id)">Send</button></td>
	</tr>


</table>

			
		</div>
		
		<div id="samples_panel" class="panel">
			<table>
				<tr>
					<td>
						<div id="AC_samples"></div>
					</td><td>
						<div id="ML_samples"></div>
					</td><td>
						<div id="M1_samples"></div>
					</td><td>
						<div id="M2_samples"></div>
					</td>
				</tr>
			</table>
		</div>	
  
	</center>

	<div id="feedback_panel" style="display: none">
		<p id='feedback'></p>
	</div>

</body>
</html>
